<!--
 * @Author: Kevin Zhao
 * @Date: 2021-04-01 20:36:57
 * @LastEditTime: 2021-12-11 14:06:13
 * @LastEditors: Kevin Zhao
 * @Description: 文章页面
 * @FilePath: \uniapp-pro\src\pages\article\article.vue
-->
<template>
	<view class="container">
		<!-- 配置了已关联公众号链接的直接用web-view打开 -->
		<div v-if="hrefUrl">
        	<web-view :src="hrefUrl"></web-view>
		</div>
		<!-- 未配置的渲染富文本 -->
		<div v-else>
			<view class="title">{{title}}</view>
			<view class="view-num">阅读量 {{viewNum}}</view>
			<u-parse class="parse" :html="content"></u-parse>
		</div>
	</view>
</template>

<script>
    import Vue from 'vue';
	import { 
		getArticleInfoAPI,
		updateArticleViewNumAPI
	} from '../../api/arc'

	export default Vue.extend({
		data() {
			return {
				content: '',
				title: '',
				articleId: 0,
				viewNum: 0,
				hrefUrl: ''
			}
		},
		onLoad(option) {
			this.articleId = option ? option.articleId : 0
			getArticleInfoAPI({
				articleId: this.articleId
			}).then(res => {
				this.content = res.articleVo.content
				this.title = res.articleVo.title
				this.viewNum = res.articleVo.viewNum
				this.hrefUrl = res.articleVo.hrefUrl
			})
			updateArticleViewNumAPI({
				articleId: this.articleId
			})
		},
		methods: {

		}
	});
</script>

<style lang="scss" scoped>

.container{
	padding: 20rpx;
	font-size: 30rpx;
	line-height: 50rpx;
	text-indent: 1em;
	.title{
		font-size: 40rpx;
		text-align: center;
		margin: 20rpx 0;
	}
	.view-num{
		text-align: right;
		color: #666;
		margin-bottom: 15rpx;
		margin-right: 10rpx;
	}
	.parse{
		overflow: hidden;
	}
}
</style>
